import {
  InteractiveCounter,
  UserCard,
  ProgressDemo,
  NotificationDemo,
  TimelineDemo,
  StatisticsDemo,
  InputDemo,
  BadgeDemo
} from './CustomComponents';

// 自定义组件配置
export const components = {
    // 自定义标题组件
    h1: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h1 className="mdx-h1" {...props} />,
    h2: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h2 className="mdx-h2" {...props} />,
    h3: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h3 className="mdx-h3" {...props} />,
    h4: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h4 className="mdx-h4" {...props} />,
    h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h5 className="mdx-h5" {...props} />,
    h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => <h6 className="mdx-h6" {...props} />,
    
    // 自定义段落组件
    p: (props: React.HTMLAttributes<HTMLParagraphElement>) => <p className="mdx-paragraph" {...props} />,
    
    // 自定义代码块组件
    pre: (props: React.HTMLAttributes<HTMLPreElement>) => <pre className="mdx-pre" {...props} />,
    code: (props: React.HTMLAttributes<HTMLElement>) => <code className="mdx-code" {...props} />,
    
    // 自定义列表组件
    ul: (props: React.HTMLAttributes<HTMLUListElement>) => <ul className="mdx-ul" {...props} />,
    ol: (props: React.HTMLAttributes<HTMLOListElement>) => <ol className="mdx-ol" {...props} />,
    li: (props: React.HTMLAttributes<HTMLLIElement>) => <li className="mdx-li" {...props} />,
    
    // 自定义表格组件
    table: (props: React.HTMLAttributes<HTMLTableElement>) => <table className="mdx-table" {...props} />,
    thead: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <thead className="mdx-thead" {...props} />,
    tbody: (props: React.HTMLAttributes<HTMLTableSectionElement>) => <tbody className="mdx-tbody" {...props} />,
    tr: (props: React.HTMLAttributes<HTMLTableRowElement>) => <tr className="mdx-tr" {...props} />,
    th: (props: React.HTMLAttributes<HTMLTableCellElement>) => <th className="mdx-th" {...props} />,
    td: (props: React.HTMLAttributes<HTMLTableCellElement>) => <td className="mdx-td" {...props} />,
    
    // 自定义引用组件
    blockquote: (props: React.HTMLAttributes<HTMLQuoteElement>) => <blockquote className="mdx-blockquote" {...props} />,
    
    // 自定义链接组件
    a: (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => <a className="mdx-link" target="_blank" rel="noopener noreferrer" {...props} />,
    
    // 自定义分割线组件
    hr: (props: React.HTMLAttributes<HTMLHRElement>) => <hr className="mdx-hr" {...props} />,
    
    // 自定义强调组件
    strong: (props: React.HTMLAttributes<HTMLElement>) => <strong className="mdx-strong" {...props} />,
    em: (props: React.HTMLAttributes<HTMLElement>) => <em className="mdx-em" {...props} />,
    
    // 自定义React组件 (使用Antd)
    InteractiveCounter: InteractiveCounter as React.ComponentType,
    UserCard: UserCard as React.ComponentType,
    ProgressDemo: ProgressDemo as React.ComponentType,
    NotificationDemo: NotificationDemo as React.ComponentType,
    TimelineDemo: TimelineDemo as React.ComponentType,
    StatisticsDemo: StatisticsDemo as React.ComponentType,
    InputDemo: InputDemo as React.ComponentType,
    BadgeDemo: BadgeDemo as React.ComponentType,
  }